<template>
  <div class="page-box">
    <!-- ! 按钮区域 -->
    <div class="tabbar-bar">
      <el-row>
        <div>
          <el-button plain type="primary" icon="el-icon-plus" size="mini">新增</el-button>
        </div>
      </el-row>
    </div>
    <!-- ! 表格区域 -->
    <div class="table-box">
      <el-table border default-expand-all :data="list" row-key="id">
        <el-table-column prop="title" label="菜单名称" />
        <el-table-column prop="path" label="菜单地址" />
        <el-table-column prop="mark" label="权限标识" />
        <el-table-column prop="icon" label="图标" />
        <el-table-column prop="component" label="组件路径" />
        <el-table-column label="类型" align="center">
          <template #default="{row}">
            <el-tag v-if="row.type===1">菜单</el-tag>
            <el-tag v-else type="warning">按钮</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否显示" align="center">
          <template #default="{row}">
            <el-switch
              v-model="row.is_show"
              :active-value="1"
              :inactive-value="0"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{row}">
            <el-row type="flex" justify="center">
              <el-button circle type="primary" icon="el-icon-edit" size="mini" />
              <el-button v-if="row.type===1" circle type="warning" icon="el-icon-plus" size="mini" />
              <el-button circle type="danger" icon="el-icon-delete" size="mini" />
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getMenuList } from '@/api/system/menu'
export default {
  data() {
    return {
      list: []
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async  initData() {
      const res = await getMenuList()

      this.list = res
    }
  }
}
</script>
<style lang="scss" scoped>
.page-box {
    margin: 20px;
    padding: 20px;
    background-color: #fff;
    .tabbar-box {
      padding-top: 10px;

      height: 50px;

    }
::v-deep .el-button--primary.is-plain{
      margin-bottom: 15px;
     }
  }
</style>
